<template>
    <div>
        <el-form :label-position="'left'" label-width="150px" >
            <el-form-item label="logo" >
            <el-upload
                class="avatar-uploader"
                action="https://hks-sys.dindong.cn/api/file/upload-img"
                name="photo"
                :show-file-list="false"
                :on-success="handlePhoto"
                :before-upload="beforeAvatarUpload">
                <img v-if="photoImg" :src="photoImg" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="单位名称">
                <el-input v-model="member.name" style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
                <el-input v-model="member.phone" type="phone"  style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="单位地址" prop="origin">
                <el-cascader
                    placeholder="选择地址"
                    :options="ORIGIN"
                    :props="{value:'label'}"
                    v-model="member.address"
                    class="cascader"
                    filterable></el-cascader>
            </el-form-item>
            <el-form-item label="详细地址">
                <el-input v-model="member.addressDetail" style="width:400px"></el-input>
            </el-form-item>
            <el-form-item label="统一社会信用代码">
                <el-input v-model="member.code"  style="width:400px"></el-input>
            </el-form-item>
            <el-form-item label="单位标签">
                    <el-input v-model="tag" palceholder="输入单位标签" style="width:200px"></el-input>
                    <el-button type="primary" @click="addTag">添加</el-button>
                </el-form-item>
                <el-form-item>
                    <div class="memberPicWrapper">
                        <div class="memberPicDetail" v-for="(item,index) of tagList" :key="index">
                            <div>{{item}}</div>
                            <img src="../../../static/images/delete.png" alt="" class="delete" @click.stop="deleteTag(item,index)">
                        </div>
                    </div>
                </el-form-item>
            <el-form-item label="单位简介">
                <vue-ueditor-wrap v-model="detail" :config="myConfig" ></vue-ueditor-wrap>
            </el-form-item>
            <div  class="add-table-wrapper">
                <el-button type="primary" @click="commit" class="add-table-wrapper-btn">保存</el-button>
            </div>
        </el-form>
    </div>
</template>
<script>
import ORIGIN from '../../assets/json/origin.json'
export default {
    data(){
        return{
            ORIGIN,
            id:'',
            photoImg:'',
            photoId:'',
            member:{
                name:'',
                code:'',
                address:[],
                addressDetail:'',
                phone:'',
            },
            tag:'',
            tagList:[],
            detail:'',
            myConfig: {
                // 编辑器不自动被内容撑高
                autoHeightEnabled: false,
                // 初始容器高度
                initialFrameHeight: 500,
                // 初始容器宽度
                initialFrameWidth: '100%',
                // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
                // serverUrl: 'http://35.201.165.105:8000/controller.php',
                serverUrl:'https://hks-sys.dindong.cn/ueditor-php/controller.php',
                // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
                //UEDITOR_HOME_URL: '/peoples_association_backstage/dist//static/UEditor/'
              toolbars: [
                [
                  'undo', 'redo', '|',
                  'bold', 'italic', 'underline', 'strikethrough',
                  'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor',
                  'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                  'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                  'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                  'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
                  'simpleupload', 'insertimage', 'insertvideo', 'music',
                  'horizontal', 'date', 'time',
                  'inserttable'
                ]
              ]
            },

        }
    },
    methods:{
        async commit(){
            let params={
                unit_name:this.member.name,
                logo_id:this.photoId,
                uniform_social_credit_code:this.member.code,
                province:this.member.address[0]||'',
                city:this.member.address[1]||'',
                area:this.member.address[2]||'',
                address:this.member.addressDetail,
                contact_number:this.member.phone,
                business_scope:this.tagList,
                introduction:this.detail
            }
            let res =await this.$api.setOfficialUnitInfo(params);
            if(res.data.level=='success'){
                this.$message.success(res.data.message);
                this.getOfficialUnitInfo()
            }else{
                this.$message.errow(res.data.message)
            }
        },
        addTag(){
            if(this.tag==''){
                this.$message({
                    type:'warning',
                    message:'单位标签不能为空'
                });
                return;

            }
            this.tagList.push(this.tag);
            this.tag=''
        },
        deleteTag(item,index){
			//删除
			this.tagList.splice(index,1);
        },
        beforeAvatarUpload(file) {
			//上传照片前的操作
			// console.log(file,555)
		},
		handlePhoto(res, file) {
			//上传照片成功
			if(res.data){
				this.photoImg=res.data.img_url;
				this.photoId=res.data.id;
			}
        },
        async getOfficialUnitInfo(){
            //获取详情
            let res=await this.$api.getOfficialUnitInfo();
            if(res.data.level=='success'){
                if(res.data.data){
                    let data=res.data.data
                    this.member.name=data.name;
                    this.photoId=data.photo_id;
                    this.photoImg=data.logo_url;
                    this.member.code=data.uniform_social_credit_code;
                    this.member.address=[data.province,data.city,data.area];
                    this.member.addressDetail=data.address;
                    this.member.phone=data.contact_number;
                    this.tagList=data.unit_business_label;
                    this.detail=data.introduction||'';
                }
            }else{
                this.$message.error(res.data.message)
            }


        },
    },
    mounted() {
            this.getOfficialUnitInfo()
    },
}
</script>
<style lang="scss" scoped>
    .avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
		border: 1px dashed #d9d9d9;
	}
	.avatar {
		width: 178px;
		height: 178px;
		display: block;
		object-fit: contain;
	}
    .add-table-wrapper{
        display: flex;
        justify-content: center;
        padding:30px 0;
    }

    .memberPicWrapper{
		display:flex;
		flex-wrap: wrap;
	}
	.memberPicDetail{
		text-align: center;
		margin:0 10px;
		position: relative;
		.delete{
			width:20px;
			height: 20px;
			position: absolute;
			top:-10px;
			right:-10px;
		}
	}
</style>
